<template>
	<view class="container">
	<view class="section">
	  <text class="title">本地图片选择</text>
	  <button @click="chooseImage()" type="primary">选择图片</button>
	  <view class="image-list">
	    <image 
	      v-for="(img, index) in localImages" 
	      :key="index" 
	      :src="img" 
	      mode="widthFix"
	      @click="previewImage(index)"
	    ></image>
	  </view>
	</view>
	
	<view class="section">
	  <text class="title">明日天气预报</text>
	  <view class="weather-info" v-if="weatherData">
	    <text>日期：{{ weatherData.date }}</text>
	    <text>星期：{{ weatherData.week }}</text>
	    <text>最高温：{{ weatherData.high }}</text>
	    <text>最低温：{{ weatherData.low }}</text>
	  </view>
	  <text v-else class="loading">加载中...</text>
	</view>
	<view class="section">
	  <text class="title">网络图片下载</text>
	  <button @click="downloadImage" type="primary">下载图片</button>
	  <text class="progress">下载进度：{{ downloadProgress }}%</text>
	  <image 
	    v-if="downloadedImage" 
	    :src="downloadedImage" 
	    mode="widthFix"
	  ></image>
	</view>
	
	
	  </view>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<view>
		<view v-for="(item, index) in datalist" style="margin: 10rpx;">
			<CustomTextView :imgindex="index" :images="item.images" :title="item.title" :isTop="item.isTop"
				:author="item.author" :comments="item.comments" :time="item.time" :mode="item.mode"
				:bgColor="item.mode === 3 ? '#fef6e6' : '#fff'" @click="onCustomViewClick(index)">
				<template v-slot:tips>
					<view class="slotcontent" v-if="item.showSearch">
						<text>搜索：</text>
						<view class="borderbox"><text>今日金价</text></view>
						<view class="borderbox"><text>精选好物</text></view>
					</view>
				</template>
			</CustomTextView>
		</view>
	</view>
</template>

<script>
	import CustomTextView from "../components/cardTextView.vue";
	export default {
		components: {
			CustomTextView
		},
		onLoad() {
		  this.getWeather();
		},
		data() {
			return {
				 localImages: [],
				weatherData: null,
				downloadProgress: 0,
				downloadedImage: '',
				datalist: [{
						nId: "T15627",
						title: "14个月从100家开到1000家门店，蜜雪为何买下这家精酿啤酒商",
						isTop: true,
						author: "界面新闻",
						comments: 56,
						time: "2025.10.07",
						showSearch: false,
						mode: 1,
						images: []
					},
					{
						nId: "B4485",
						title: "把握历史大势，共创美好未来（观沧海）",
						isTop: false,
						author: "人民日报",
						comments: 1025,
						time: "2025.10.25",
						showSearch: false,
						mode: 2,
						images: ["/static/logo.png"]
					},
					{
						nId: "B5956",
						title: "黄金还能走多远？卖方高呼“第三浪启动”，230多份研报看多",
						isTop: false,
						author: "新华社",
						comments: 452,
						time: "2025.10.28",
						showSearch: true,
						mode: 2,
						images: ["/static/logo.png"]
					},
					{
						nId: "AD001",
						title: "加微信交友群，喜欢就聊，找喜欢的人",
						isTop: false,
						author: "我主良缘文化",
						comments: 0,
						time: "2025.10.08 09:50",
						showSearch: false,
						mode: 3,
						images: ["/static/logo.png", "/static/logo.png", "/static/logo.png"],
						bgColor: "#fef6e6"
					},
					{
						nId: "B5954",
						title: "奋进“十五五” 续写新篇章｜“人享其行、物畅其流”加快实现 重塑区域经济格局",
						isTop: false,
						author: "央视网",
						comments: 152200,
						time: "2025.10.28",
						showSearch: false,
						mode: 2,
						images: ["/static/logo.png"]
					},
					{
						nId: "S45895",
						title: "整治网络直播打赏乱象 中央网信办开展为期2个月专项行动",
						isTop: false,
						author: "央视网",
						comments: 59874,
						time: "2025.10.27",
						showSearch: false,
						mode: 2,
						images: ["/static/logo.png"]
					}
				]
			};
		},
		methods: {
			onCustomViewClick(index) {
				console.log("点击了第", index, "项");
			},
			
			 
			
			
			chooseImage() {
			  uni.chooseImage({
			    count: 3, 
			  
			    success: (res) => {
			      this.localImages = this.localImages.concat(res.tempFilePaths);
			    }
			  });
			},
			previewImage(index) {
			  uni.previewImage({
			    current: this.localImages[index], 
			    urls: this.localImages 
			  });
			},
			getWeather() {
			  uni.request({
			    url: 'http://t.weather.sojson.com/api/weather/city/101230501', 
			    method: 'GET',
			    success: (res) => {
			      if (res.statusCode === 200 && res.data.status === 200) {
			        
			        const tomorrowWeather = res.data.data.forecast[1];
			        this.weatherData = {
			          date: tomorrowWeather.date,
			          week: tomorrowWeather.week,
			          high: tomorrowWeather.high,
			          low: tomorrowWeather.low
			        };
			      }
			    },
			    fail: (err) => {
			      console.error('获取天气失败：', err);
			    }
			  });
			},
			
			
			downloadImage() {
			  this.downloadProgress = 0;
			  const imageUrl = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
			  
			  const downloadTask = uni.downloadFile({
				  
				   
			    url: imageUrl,
				
				
			    success: (res) => {
			      if (res.statusCode === 200) {
			        
			        this.downloadedImage = res.tempFilePath;
			      }
			    },
			    fail: (err) => {
			      console.error('图片下载失败：', err);
			    }
			  });
			
			
			  downloadTask.onProgressUpdate((progress) => {
			    this.downloadProgress = progress.progress;
			  });
			}
			
			
			
			
		}
	};
</script>

<style>
	.section {
	  margin-bottom: 40rpx;
	  padding: 20rpx;
	  background-color: #f5f5f5;
	  border-radius: 10rpx;
	}
	.title {
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-bottom: 20rpx;
	  display: block;
	}
	.image-list {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10rpx;
	}
	.image-list image {
	  width: 200rpx;
	  height: 200rpx;
	  object-fit: cover;
	  border-radius: 5rpx;
	}
	.weather-info {
	  display: flex;
	  flex-direction: column;
	  gap: 10rpx;
	  margin-top: 10rpx;
	}
	
	
	
	
	
	.slotcontent {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
		gap: 20rpx;
		border-top: 1rpx solid #f0f0f0;
		margin-top: 10rpx;
	}

	.borderbox {
		border: 1px solid #d0e3ff;
		border-radius: 12rpx;
		padding: 10rpx 20rpx;
		background: linear-gradient(135deg, #f0f7ff, #e1eeff);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.borderbox text {
		font-size: 24rpx;
		color: #1890ff;
		font-weight: 500;
	}
</style>